<template>
  <div class="data_box">
    <!-- <div class="role_top">
    <div class="role_content"></div>
    </div> -->
    <transition name="fade">
        <router-view />
      </transition>
  </div>
</template>

<script>
export default {
    name:'Consum'
}
</script>

<style>
/* @keyframes rotata {
    0%{
      transform:rotate(0)
    }
    100%{
      transform: rotate(-360deg);
    }
} 
@keyframes rotate {
    0%{
      transform:rotate(0)
    }
    100%{
      transform: rotate(720deg);
    }
} 
.role_top{
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  border-top: 1vw solid rgba(256, 256, 256, .5);
  border-right: 1vw solid rgba(256, 256, 256, .5);
  border-bottom: 1vw solid rgba(256, 256, 256, .5);
  border-left: 1vw solid rgba(0,0,0,0);
  display: flex;
  justify-content: center;
  align-items: center;
              animation-name: rotata;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}
.role_content{
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  border-top: 1vw solid #fff;
  border-right: 1vw solid rgba(0,0,0,0);
  border-bottom: 1vw solid #fff;
  border-left: 1vw solid #fff;
  animation-name: rotate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
} */
</style>